<template>
	<view class="con">
		<view class="info">
			<view class="title">
				网卡：{{traffic.netDevName || '加载中...'}} | 速率：{{traffic.speed || '加载中...'}} | ip: {{traffic.ip || '加载中...'}}
			</view>
			<view class="switch">
				<view class="">
					共{{numbers.length}}条线路
				</view>
				<view class="switch1">
					<view class="">
						bras开关：
					</view>
					<switch color="#00a9e1"  style="transform:scale(0.7)"></switch>
				</view>
			</view>
			
			<view class="line" v-if="numbers.length > 0">
				<view class="vlan">
					vlan_id
				</view>
				<view class="numinfo">
					拨号信息
				</view>
				<view class="close" @tap="delAll">
					X
				</view>
			</view>
			
			<view class="line-info" v-for="(item,index) in numbers" :key="index" >
				<view class="vlan-info">
					{{item.vlan_id}}
				</view>
				<view class="numinfo-info">
					<view class="">
						账号：{{item.username}}
					</view>  
					<view class="">
						密码：{{item.password}}
					</view>  
					<view class="">
						MAC：{{item.MAC||'--'}}
					</view>  
				</view>
				<view class="close-info" @tap="update(index)">
					Y
				</view>
				<view class="close-info" @tap="del(index)">
					X
				</view>
			</view>
			
			
			<view class="fill">
				<view class="fill-button" @tap="addLines">
					批量填写
				</view>
				<view class="fill-button" @tap="addLine">
					添加线路
				</view>
			</view>
		</view>
		
		<view class="foot">
			<view class="buttons">
				<view class="button-pass">
					同步网卡信息
				</view>
				<view class="button-yes" @tap="callNumber">
					开始拨号
				</view>
			</view>
		</view>
		
		<view class="box" v-if="show"  @tap="coneal"></view>
		
		<view class="modal" v-if="show">
			<view class="title">
				<view class="">
					编辑线路信息
				</view>
				<view class="" @tap="coneal">
					X
				</view>
			</view>
			<view class="line"></view>
			<view class="content">
				<view class="node-type-one">
					<view class="title">vlan_id</view>
					<input type="text" class="uni-input" name="" v-model="vlan_id" placeholder="vlan_id" />
				</view>
				<view class="node-type-one">
					<view class="title">账号</view>
					<input type="text" class="uni-input" name="" v-model="name" placeholder="请填写拨号账号" />
				</view>
				<view class="node-type-one">
					<view class="title">密码</view>
					<input type="text" class="uni-input" name="" v-model="password" placeholder="填写密码" />
				</view>
				<view class="node-type-one">
					<view class="title">MAC</view>
					<input type="text" class="uni-input" name="" v-model="mac" placeholder="填写MAC地址" />
				</view>
				<view class="node-type-one">
					<view class="title"></view>
					<view class="tip">
						如果非运营商强制要求指定MAC地址，请勿随意调整。调整可能会引发短暂掉线
					</view>
				</view>
			</view>
			<view class="button" @tap="save">
				保存
			</view>
		</view>
		
		<view class="box" v-if="shows"  @tap="coneals"></view>
		
		<view class="modals" v-if="shows">
			<view class="title">
				<view class="">
					批量填写该网卡关联的vlan_id、拨号账号、拨号密码、MAC地址
				</view>
				<view class="" @tap="coneals">
					X
				</view>
			</view>
			<textarea class="content" v-model='textarea'></textarea>
			<view class="tip">
				如果非运营商强制要求指定MAC地址，请勿随意调整。调整可能会引发短暂掉线
			</view>
			<view class="buttons">
				<view class="btn-info">
					批量识别将覆盖网卡所有拨号信息
				</view>
				<view class="btn">
					<view class="btn-clear" @tap="delTextareaAll">
						清空
					</view>
					<view class="btn-check" @click="saveAll">
						识别
					</view>
				</view>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	let App = getApp()
	export default {
		data() {
			return {
				natnums:2,
				shows:false,
				show:false,
				vlan_id:'',
				name:'',
				password:'',
				mac:"",
				textarea:"",
				numbers:[],
				nodeID:'',
				rSelect:'',
				dSelect:'',
				manager:[],
				traffic:[],
			}
		},
		
		onLoad(option) {
			this.nodeID = option.nodeID
			this.rSelect = option.rSelect
			this.dSelect = option.dSelect
			this.getInfo()
			console.log('this.nodeID'+this.nodeID,'this.rSelec'+option.rSelec)
		},
		methods: {
			
			getInfo(){
				let dataNew = ''; 

				this.$api.interfaceApi('dialStatus')({
					nodeID:this.nodeID,
					sys:App.globalData.sys
				}).then(res=>{
					if(res.code == 200){
						for(var i=0;i < res.data.detail.length;i++){
							if(res.data.detail[i]['type'] ==  "manager"){
								this.manager = res.data.detail[i]
							}
							
							if(res.data.detail[i]['type'] ==  "traffic"){
								this.traffic = res.data.detail[i]
								
								for(var j=0;j<res.data.detail[i].dialStatusInfo.length;j++){
	
									dataNew += res.data.detail[i].dialStatusInfo[j].vlanId+" "+res.data.detail[i].dialStatusInfo[j].account+" "+res.data.detail[i].dialStatusInfo[j].password+" --"
									if(j < res.data.detail[i].dialStatusInfo.length-1){
										dataNew+="\n"
									}
									
									var newTemp = {
										'vlan_id':res.data.detail[i].dialStatusInfo[j].vlanId,
										'username':res.data.detail[i].dialStatusInfo[j].account,
										'password':res.data.detail[i].dialStatusInfo[j].password,
										'MAC':'--'
									}
									this.numbers.push(newTemp)
									
								}
							}
						}
						this.textarea = dataNew
						
					}else{
						uni.showToast({
							title:'获取失败,请联系管理',
							icon:'none'
						})
					}
				})
			},
			
			addLine(){
				this.show = true
			},
			
			coneal(){
				this.show = false
				this.vlan_id = ''
				this.name = ''
				this.password = ''
				this.mac = ''
			},
			//添加单条
			save(){
				let temp = {
					'vlan_id':this.vlan_id,
					'username':this.name,
					'password':this.password,
					'MAC':this.mac
				}
				this.show=false
				this.vlan_id = ''
				this.name = ''
				this.password = ''
				this.mac = ''
				this.numbers.push(temp)
			},
			
			
			addLines(){
				let data = '';
				for(let i=0;i<this.numbers.length;i++){
					data += this.numbers[i].vlan_id+" "+this.numbers[i].username+" "+this.numbers[i].password+" "+this.numbers[i].MAC
					if(i < this.numbers.length-1){
						data+="\n"
					}
				}
				
				this.textarea = data
				this.shows = true
			},
			
			//识别
			saveAll(){
				
				let data = this.textarea.split('\n')
				let newData = []
				this.numbers = []
				
				for(let i=0;i<data.length;i++){
					var temp = data[i].split(' ')
					var newTemp = {
						'vlan_id':temp[0],
						'username':temp[1],
						'password':temp[2],
						'MAC':temp[3]
					}
					newData.push(newTemp)
				}
				this.numbers = newData
				this.shows = false
			},
			
			delTextareaAll(){
				this.textarea = ''
			},
			
			coneals(){
				this.shows = false
			},
			
			//删除所有
			delAll(){
				let _this = this
				uni.showModal({
					title:'清空网卡拨号信息',
					content:'确定要清空网卡拨号信息吗？清空后无法撤销！',
					success:function(res){
						if(res.confirm){
							_this.numbers = []
						}else if(res.cancel){
							
						}
					}
				})
			},
			
			//删除单条
			del(index){
				this.numbers.splice(index,1)
			},
			
			update(index){
				this.numbers[index]
				this.show = true
				this.vlan_id = this.numbers[index].vlan_id
				this.name = this.numbers[index].username
				this.password = this.numbers[index].password
				this.mac = this.numbers[index].MAC
			},
			
			callNumber(){
				
				let _this = this
				let adddata = [];
				
				let newData = []
				let data = this.textarea.split('\n')
				for(let i=0;i<data.length;i++){
					var temp = data[i].split(' ')
					var newTemp = {
						'vlanId':temp[0]*1,
						'account':temp[1],
						'password':temp[2]
					}
					newData.push(newTemp)
				}

				adddata = {
					'managerNetDevName':this.manager.netDevName ,
					'netDevItems':[
						{
							"netDevName": this.traffic.netDevName,
							"accounts":newData
						}
					]
				}
				
				uni.showModal({
					
					title:'开始拨号',
					content:'请仔细核对拨号信息，确认开始拨号吗？',
					success:function(res){
						if(res.confirm){
							uni.showLoading({
								title:'拨号中'
							})
							_this.$api.interfaceApi('dialSubmit')({
								sys:App.globalData.sys,
								node_id:_this.nodeID,
								data: JSON.stringify(adddata)
							}).then(result=>{
								uni.hideLoading();
								if(result.code == 200){
									uni.navigateTo({
										url:'/pages/index/number-line?nodeID='+_this.nodeID
									})
								}else{
									uni.showToast({
										title:"获取失败",
										icon:'none'
									})
								}
							})	
						}else if(res.cancel){
							
						}
					}
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.con{
		padding: 10rpx 40rpx;
		.info{
			background-color: #FFFFFF;
			box-shadow: 0rpx 0rpx 10rpx 0rpx #eaeaea;
			border-radius: 20rpx;
			margin-bottom: 300rpx;
			
			.title{
				font-size: 26rpx;
				padding: 20rpx 20rpx 0rpx 20rpx;
				box-sizing: border-box;
			}
			
			.switch{
				padding: 0 20rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
				line-height: 55rpx;
				
				.switch1{
					display: flex;
					justify-content: space-between;
				}
			}
			
			.line{
				display: flex;
				justify-content: space-between;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				font-weight: bolder;
				background-color: #75cae645;
				.vlan{
					width: 20%;
				}
				.numinfo{
					width: 60%;
				}
				.close{
					width: 20%;
					text-align: end;
				}
			}
			
			.line-info:nth-of-type(even){
				display: flex;
				justify-content: space-between;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				font-size: 26rpx;
	
				.vlan-info{
					width: 20%;
					display: flex;
					align-items: center;
				}
				.numinfo-info{
					width: 60%;
					display: flex;
					flex-direction: column;
				}
				.close-info{
					width: 10%;
					display: flex;
					justify-content: flex-end;
					align-items: center;
				}
			}
			
			.line-info:nth-of-type(odd){
				display: flex;
				justify-content: space-between;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				background-color: #75cae645;
				.vlan-info{
					width: 20%;
					display: flex;
					align-items: center;
				}
				.numinfo-info{
					width: 60%;
					display: flex;
					flex-direction: column;
				}
				.close-info{
					width: 10%;
					display: flex;
					justify-content: flex-end;
					align-items: center;
				}
			}
			
			.fill{
				display: flex;
				flex-direction: row-reverse;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				
				.fill-button{
					background-color: #00a9e1;
					color: #FFFFFF;
					padding: 10rpx 20rpx;
					border-radius: 20rpx;
					font-size: 26rpx;
					margin-left: 20rpx;
				}
			}
		}
		
		.foot{
			position: fixed;
			bottom: 0;
			left: 0;
			border-top: 2rpx solid #eaeaea;
			box-shadow: 0rpx 0rpx 10rpx 0rpx #d4cdcd;
			height: 240rpx;
			padding: 20rpx;
			width: 100%;
			box-sizing: border-box;
			background-color: #FFFFFF;

			.buttons{
				display: flex;
				justify-content: space-between;
				margin-top: 10rpx;
				
				.button-pass{
					padding: 20rpx 90rpx;
					border-radius: 20rpx;
					border: 2rpx solid #eaeaea;
					font-size: 30rpx;
				}
				
				.button-yes{
					padding: 20rpx 90rpx;
					border: 2rpx solid #FFFFFF;
					color: #FFFFFF;
					border-radius: 20rpx;
					font-size: 30rpx;
					background: linear-gradient(to right , #00a9e1 , #0055ff);
				}
			}	
		}
		
		.modal{
			background-color: #FFFFFF;
			border-radius: 15rpx;
			width: 100%;
			height: 800rpx;
			position: absolute;
			bottom: 0%;
			left: 0%;
			z-index: 100;
			padding: 20rpx;
			box-sizing: border-box;
			.title{
				display: flex;
				justify-content: space-between;
				padding: 10rpx 0;
				font-size: 36rpx;
				box-sizing: border-box;
			}
			
			.line{
				border: 1rpx solid #d6d3d3;
			}
			
			.content{
				.node-type-one{
					display: flex;
					padding: 30rpx 0 0 0;
					
					.title{
						width: 20%;
						padding: 20rpx 10rpx;
						font-size: 26rpx;
					}
				
					.uni-input{
						width: 80%;
						background-color:#eaeaea ;
						padding: 20rpx 10rpx;
						border-radius: 10rpx;
						font-size: 26rpx;
					}
					
					.radio{
						padding: 20rpx 10rpx;
						font-size: 26rpx;
					}
					
					.tip{
						width: 80%;
						font-size: 26rpx;
						color: #d4cdcd;
					}
					
				}
			}
			.button{
				background-color: #00a9e1;
				color: #FFFFFF;
				text-align: center;
				border-radius: 20rpx;
				padding: 20rpx;
				margin-top: 30rpx;
			}
			
		}
		.box{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color:#000000;
			opacity: 0.5;
			z-index: 99;
		}
		
		.modals{
			background-color: #FFFFFF;
			border-radius: 15rpx;
			width: 100%;
			height: 600rpx;
			position: absolute;
			top: 20%;
			left: 0%;
			z-index: 100;
			padding: 20rpx;
			box-sizing: border-box;
			.title{
				display: flex;
				justify-content: space-between;
				padding: 10rpx 0;
				font-size: 24rpx;
				box-sizing: border-box;
			}

			.content{
				width: 100%;
				margin-top: 20rpx;
				border: 1rpx solid #d6d3d3;
			}
			.tip{
				font-size: 26rpx;
				color: #cec8c8;
				margin-top: 20rpx;
			}
			.buttons{
				display: flex;
				justify-content: space-between;
				.btn-info{
					width: 70%;
					color: #ff5500;
					font-size: 26rpx;
				}
				
				.btn{
					display: flex;
					width: 30%;
					justify-content: space-between;
					.btn-clear{
						border: 1rpx solid #cfcfcf;
						border-radius: 20rpx;
						padding: 10rpx;
					}
					.btn-check{
						border: 1rpx solid #00a9e1;
						border-radius: 20rpx;
						padding: 10rpx;
						background-color: #00a9e1;
						color: #FFFFFF;
					}

				}
			}
		}
		
	}
</style>
